import 'ace-builds/src-noconflict/ace'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/mode-python'
import 'ace-builds/src-noconflict/theme-monokai'
import { useEffect, useState } from 'react'
import AceEditor from 'react-ace'

const CodeEdit = ({ editData, info }) => {
  console.log("CodeEdit ====>  info", info)


  return (
    <div className="nowheel">
      <AceEditor
        placeholder="Placeholder Text"
        mode="python"
        theme="monokai"
        name="CodeEdit"
        // onLoad={this.onLoad}
        onChange={value => {
          editData({
            code: value
          })
        }}
        fontSize={14}
        // lineHeight={19}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        readOnly={true}
        value={info.code}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: false,
          showLineNumbers: true,
          tabSize: 2
        }}
        debounceChangePeriod={100}
        className={`custom-code-editor`}
      />
    </div>
  )
}

export default CodeEdit
